<template>
  <div class="task-tab-container task-receipt-view-container">
    <!-- start 按钮组 -->
    <div class="btn-group">
      <el-button type="plain-third" size="mini" @click="openDialog" v-if="allowEditReceipt">{{$t('task.detail.components.editReceipt')}}</el-button>
    </div>
    <!-- end 按钮组 -->
    <div class="task-receipt-detail-content">
      <!-- start 审批中icon -->
      <div class="approving-img" v-if="isFinishApproving">
        <img :src="getApprovingImg()" />
      </div>
      <!-- end 审批中icon -->

      <!-- start 支付成功icon -->
      <div class="approving-img" v-if="!isFinishApproving && isPaySuccess">
        <img :src="getPaySuccessImg()" />
      </div>
      <!-- end 支付成功icon -->

      <!-- start 回执信息 -->
      <form-view :fields="fields" :value="form" class="bbx-cell-form-view" :form-cell-count="formCellCount">
        <!-- start 备件 -->
        <template slot="sparepart" slot-scope="{ field, value }">
          <div class="form-view-row form-view-row-receipt bbx-form-cell-item">
            <label>{{ field.displayName }}</label>
            <div class="form-view-row-content">
              <receipt-view-common-table :data="value" :colums="sparepartColums"/>
            </div>
          </div>
        </template>
        <!-- end 备件 -->

        <!-- start 备件返还 -->
        <template slot="sparePartsReturnExpense" slot-scope="{ field, value }">
          <div class="form-view-row form-view-row-receipt bbx-form-cell-item">
            <label>{{ field.displayName }}</label>
            <div class="form-view-row-content">
              <receipt-view-common-table type="sparePartsReturnExpense" :data="value" :colums="sparePartsReturnExpenseFields" />
            </div>
          </div>
        </template>
        <!-- end 备件返还 -->

        <!-- start 服务项目 -->
        <template slot="serviceIterm" slot-scope="{ field, value }">
          <div class="form-view-row form-view-row-receipt bbx-form-cell-item">
            <label>{{ field.displayName }}</label>
            <div class="form-view-row-content">
              <receipt-view-common-table :data="value" :colums="serviceColums" :settlement-currency="settlementCurrency"/>
            </div>
          </div>
        </template>
        <!-- end 服务项目 -->

        <!-- start 物料核销 -->
        <template slot="materialVerifyEliminate" slot-scope="{ field, value }">
          <div class="form-view-row form-view-row-receipt bbx-form-cell-item">
            <label>{{ field.displayName }}</label>
            <div class="form-view-row-content">
              <receipt-view-common-table :data="value" :colums="materialColums" :settlement-currency="settlementCurrency"/>
            </div>
          </div>
        </template>
        <!-- end 物料核销 -->

        <!-- start 物料返还 -->
        <template slot="materialReturn" slot-scope="{ field, value }">
          <div class="form-view-row form-view-row-receipt bbx-form-cell-item">
            <label>{{ field.displayName }}</label>
            <div class="form-view-row-content">
              <receipt-view-common-table :data="value" :colums="materialReturnColums" />
            </div>
          </div>
          <div class="form-view-row bbx-form-cell-item">
            <label>{{$t('task.detail.components.returnMethod')}}</label>
            <div class="form-view-row-content">
              {{returnType}}
            </div>
          </div>
          <!-- TODO 国际化待办 -->
          <div v-if="returnType === '物流'" class="form-view-row bbx-form-cell-item">
            <label>{{$t('common.base.logisticsCompany')}}</label>
            <div class="form-view-row-content">
              {{returnTypeCompany}}
            </div>
          </div>
          <div v-if="returnType === '物流'" class="form-view-row bbx-form-cell-item">
            <label>{{$t('common.base.logisticsNo')}}</label>
            <div class="form-view-row-content form-view-row-content-link-text" @click="handleViewDetail">
              {{returnTypeCode}}
            </div>
          </div>
        </template>
        <!-- end 物料返还 -->
        <!-- start 服务故障 -->
        <template slot="newFaultLibrary" slot-scope="{ field, value }">
          <div class="form-view-row form-view-row-receipt bbx-form-cell-item">
            <label>{{ field.displayName }}</label>
            <div class="form-view-row-content">
              <fault-table 
                :task="task" 
                isReceipt
              />
            </div>
          </div>
        </template>
        <!-- end 服务故障 -->
      </form-view>
      <!-- end 回执信息 -->

      <!-- start 合计 -->
      <div class="form-view-row form-view-row-receipt bbx-form-cell-item" v-if="hasExpense && serviceProviderShowPrice">
        <label>{{$t('task.detail.components.totalFee')}}</label>
        <div class="form-view-row-content">
          <!-- 没有设置规则的费用合计 -->
          <el-table :data="totalData" header-row-class-name="base-table-header-v3" row-class-name="base-table-row-v3" border v-if="!isShowSettlementRules">
            <el-table-column :label="$t('task.detail.components.sparePartFee')" v-if="showSparepart">
              <template slot-scope="scope">
                {{ getPriceShow(scope.row.sparepartTotal) }}
              </template>
            </el-table-column>
            <el-table-column :label="$t('task.detail.components.serviceFee')" v-if="showService">
              <template slot-scope="scope">
                 {{ getPriceShow(scope.row.serviceTotal) }}
              </template>
            </el-table-column>
            <el-table-column :label="$t('common.form.type.materialVerifyEliminate')" v-if="showMaterialVerifyEliminate">
              <template slot-scope="scope">
                {{ getPriceShow(scope.row.materialTotal) }}
              </template>
            </el-table-column>
            <el-table-column :label="$t('task.detail.components.discountFee')" v-if="form.disExpense != null">
              <template slot-scope="scope">
                {{ getPriceShow(scope.row.disExpense) }}
              </template>
            </el-table-column>
            <el-table-column :label="$t('task.detail.components.totalReceivables')">
              <template slot-scope="scope">
                {{ getPriceShow(scope.row.totalExpense) }}
              </template>
            </el-table-column>
          </el-table>

          <!-- 设置规则的费用合计 -->
          <el-table ref="tableRef" :data="taskRuleSettlementDetail" header-row-class-name="base-table-header-v3" row-class-name="base-table-row-v3" show-summary :summary-method="getSummaries" :span-method="objectSpanMethod" v-else>
            <el-table-column prop="settlementRules" :label="$t('common.zhongqi.title1')"></el-table-column>
            <el-table-column prop="isFreeName" :label="$t('zhongqi.setting.chargeOrNot')"></el-table-column>
            <el-table-column :label="$t('zhongqi.list.text2')" v-if="showMaterialVerifyEliminate">
              <template slot-scope="scope">
                {{ getPriceShow(scope.row.materialTotal) }}
              </template>
            </el-table-column>
            <el-table-column :label="$t('task.detail.components.serviceFee')"  v-if="showService">
              <template slot-scope="scope">
                {{ getPriceShow(scope.row.serviceTotal) }}
              </template>
            </el-table-column>
            <el-table-column :label="$t('task.detail.components.discountFee')">
              <template slot-scope="scope">
                {{ getPriceShow(scope.row.disExpense) }}
              </template>
            </el-table-column>
            <el-table-column prop="totalExpense" :label="$t('zhongqi.list.text3')">
              <template slot-scope="scope">
                {{ getPriceShow(scope.row.totalExpense) }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- end 合计 -->

      <!-- start 支付信息 -->
      <div class="form-view-row bbx-form-cell-item" v-if="paymentMethod">
        <label>{{$t('task.detail.components.customerPayMethod')}}</label>
        <div class="form-view-row-content payment-info-row">
          <p class="payment-method">
            {{$t('task.detail.components.payMethod')}}：
            <img v-if="getPaymentMethodImg()" :src="getPaymentMethodImg()" />
            {{ getPaymentMethodLabel(paymentMethod) }}
          </p>
           <!-- TODO：payment服务已废弃，拿不到数据，暂时注释 -->
          <!-- <div class="payment-method-detail" v-if="isPaySuccess">
            <p>{{$t('task.detail.components.payment')}}：{{ paymentInfo.payType }}</p>
            <p>{{$t('task.detail.components.payAccount')}}：{{ paymentInfo.buyerLogonId }}</p>
            <p>{{$t('task.detail.components.merchantOrderNo')}}：{{ paymentInfo.shbTradeNo }}</p>
            <p>{{$t('task.detail.components.payCreateTime')}}：{{ paymentInfo.createTime | fmt_datetime }}</p>
          </div> -->
        </div>
      </div>
      <!-- end 支付信息 -->
    </div>
    <!-- start 物料弹窗 -->
    <logistics-dialog
      ref= 'logisticsDialog'
      :info="{ 
        no:returnTypeCode,
        type:returnTypeCompany
        }"
    ></logistics-dialog>


  </div>
</template>

<script>
import TaskReceiptView from './TaskReceiptView';
export default TaskReceiptView;
</script>

<style lang="scss" scoped>
@import './TaskReceiptView.scss';

.form-view-row-content {
  ::v-deep .total-row-table-last-line {
    .cell {
      justify-content: center !important;
    }
  }
}
</style>
